<template>
<view class="page">
  <view class="top-container">
    <view class="container" :style="{ backgroundImage: `url(${imgUrl})` }">
      <view class="avatar-container flex-column">
        <u-avatar :src="avaterUrl" size="55"></u-avatar>
        <text class="name">{{name}}</text>
        <view  class="vip-container">
          <image
              src="http://211.149.139.63:8080/profile/upload/2023/02/13/vip买家秀_20230213161311A002.png"
              mode="scaleToFill"
              style="width: 15px; height: 15px"></image>
          <text style="color: brown; font-size: 0.5rem;margin-left:0.5rem">vip会员</text>
        </view>
      </view>
      <view class="records-container">
        <view class="flex-row">
          <text>总收益</text>
          <view class="iconfont icon-yanjing menu-icon"></view>
        </view>
        <view class="flex-row justify-between">
          <text class="big">{{staticData.total}}</text>
          <u-tag  bgColor="#fff" color="#ed0543" shape="circle" text="提现" borderColor="#fff" @click="toHandleWithDraw"></u-tag>
        </view>
        <u-line></u-line>
        <view class="flex-row justify-between">
          <view class="flex-column">
            <text>{{staticData.amountFrozen}}</text>
            <text class="marginTop">冻结金额</text>
          </view>
          <view class="flex-column">
            <text>{{staticData.amount}}</text>
            <text class="marginTop">可用收益</text>
          </view>
          <view class="flex-column">
            <text>{{staticData.amountWithdraw}}</text>
            <text class="marginTop">已提现</text>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="bottom-container">
    <view class="menu-list" >
      <view class="list-cell list-cell-arrow" v-for="(item,index) in menuList" :key="index" @click="handleToPage(index)">
        <view class="menu-item-box">
          <view :class="item.icon"></view>
          <view>{{item.title}}</view>
        </view>
      </view>
    </view>
  </view>
</view>
</template>

<script>
import bgBase64 from "@/static/const/bgBase64";
import {getStorage, setStorage} from "@/utils/auth";
import application from "@/static/const/application";
import {isEmptyString} from "@/utils/common";
export default {
  name: "index",
  data() {
    return {
      imgUrl: bgBase64.inviteBg,
      name: "",
      staticData: {},
      menuList:[
        {
          icon:"iconfont icon-shouyiguanli menu-icon",
          title:"收益记录",
          path:"/pages/invite/records/recordAll"
        },
        {
          icon:"iconfont icon-chakanxiaji menu-icon",
          title:"查看下级",
          path:"/pages/invite/viewSubordinates/index"
        },
        {
          icon:"iconfont icon-tixian1 menu-icon",
          title:"提现记录",
          path:"/pages/invite/records/withDraw"
        },
        {
          icon:"iconfont icon-zhuanyongjin menu-icon",
          title:"分享赚佣",
          path:"/pages/invite/inviteFriend/index"
        },
      ]
    };
  },
  onLoad() {
    this.imgUrl = bgBase64.inviteBg;
    this.id = getStorage(application.user).userId;
    this.getUser();
  },
  onShow() {
    this.getStaticData();
  },
  computed: {
    avaterUrl() {
      return this.$store.state.user.avatar;
    },
  },
  methods: {
    getUser() {
      if (isEmptyString(this.id)) {
        return;
      }
      this.$store.dispatch("GetUserInfoByUserId", this.id).then((response) => {
        this.name = response.data.nickName;
        setStorage(application.user, response.data);
      });
    },
    //获取收益统计数据
    getStaticData() {
      this.$store.dispatch("GetIncomeStatistics").then((response) => {
        console.log(response);
        this.staticData = response.data;
      });
    },
    //跳转去页面
    handleToPage(index){
      let path = this.menuList[index].path;
      uni.navigateTo({
        url:path
      })
    },
    toHandleWithDraw(){
      uni.navigateTo({
        url:"/pages/invite/widthDraw/index"
      })
    }
  },
}
</script>

<style scoped lang="scss">
.page{
  .top-container{
    width: 100%;
    height:18rem;
    background-color: #fff;
    padding:4rem 10px 20px 10px;
    .container{
      width: 100%;
      height: 100%;
      padding: 20px 0;
      background-size: cover;
      position: relative;
      border-radius: 20px;
      .avatar-container{
        position: absolute;
        top: -18%;
        left: 40%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text{
          color: #fff;
          font-size: 0.5rem;
        }
        .name{
          margin-top: 0.5rem;
        }
        .vip-container{
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 0.5rem;
          text-align: center;
          background: #fff;
          width: 5rem;
          border-radius: 50px;
        }
      }
      .records-container{
         position: absolute;
        width: 100%;
        top:30%;
        padding: 0 20px;
        text{
          font-size: 1rem;
          color: #fff;
        }
        .iconfont{
          font-size: 1rem;
          color: #fff;
          margin-left: 0.5rem;
        }
        .flex-row{
          display: flex;
          align-items: center;
          margin-top: 0.5rem;
          .big{
            font-size: 1.5rem;
            color: #fff;
          }
        }
        .justify-between{
          justify-content: space-between;
          padding-bottom: 10px;
        }
        .flex-column{
          display: flex;
          flex-direction: column;
          align-items: center;
          text{
            font-size: 0.9rem;
          }
          .marginTop{
            margin-top: 0.5rem;
          }
        }
      }
    }
  }
  .bottom-container{
    background-color: #FFFFFF;
    .icon-shouyiguanli{
      color:#e43d33;
    }
    .icon-chakanxiaji{
      //color:rgb(180,144,250);
      color:rgb(0, 191, 255);
    }
    .icon-tixian1{
      color:rgb(250, 184, 24);
    }
    .icon-zhuanyongjin{

      color: rgb(244,106,34);
    }
  }
}
</style>